import { useState, forwardRef, useImperativeHandle } from 'react';
import { EJobType, TJob, EStatus } from '@/types';

interface JobEditorProps {
   data: TJob;
   onSubmit: (data: TJob) => void;
   submitTxt?: string;
}

const JobEditor = forwardRef<HTMLDivElement, JobEditorProps>((props, ref) => {
   const { data, onSubmit, submitTxt = 'Add' } = props;


   const [form, setForm] = useState<TJob>(data);
   const handleChange = (e) => {
      const { value, name } = e.target;
      setForm({
         ...form,
         [name]: value,
      });
   };

   return (
      <div className="box">
         <div className="flex flex-col w-1/2 space-y-2">
            <div className="form-item-content">
               <label className="w-1/4">Company</label>
               <input
                  value={form.company}
                  name="company"
                  onChange={handleChange}
               />
            </div>
            <div className="form-item-content">
               <label className="w-1/4">Position</label>
               <input
                  value={form.position}
                  name="position"
                  onChange={handleChange}
               />
            </div>
            <div className="form-item-content">
               <label className="w-1/4">Location</label>
               <input
                  value={form.location}
                  name="location"
                  onChange={handleChange}
               />
            </div>
            <div className="form-item-content">
               <label className="w-1/4">Status</label>
               <select
                  value={form.status}
                  onChange={handleChange}
                  name="status"
               >
                  <option value={EStatus.INTERVIEW}>Interview</option>
                  <option value={EStatus.PENDING}>Pedding</option>
                  <option value={EStatus.DECLINED}>Declined</option>
               </select>
            </div>
            <div className="form-item-content">
               <label className="w-1/4">Type</label>
               <select
                  value={form.jobType}
                  onChange={handleChange}
                  name="jobType"
               >
                  <option value={EJobType.FULL_TIME}>Full Time</option>
                  <option value={EJobType.PART_TIME}>Part Time</option>
               </select>
            </div>
            <div className="text-right pt-4">
               <button onClick={onSubmit.bind(null, form)}>{submitTxt}</button>
            </div>
         </div>
      </div>
   );
});

export default JobEditor;
